<template>
  <div>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="holders" border :height="height" @sort-change="dataSort">
      <el-table-column :label="$t('股东名称')" show-overflow-tooltip align="center" sortable="custom" prop="holderName" />
      <el-table-column :label="$t('股东类型')" show-overflow-tooltip align="center" min-width="100" sortable="custom" prop="holderType" :formatter="holderTypeFormat" />
      <el-table-column :label="$t('股权比例(%)')" show-overflow-tooltip align="center" sortable="custom" prop="holderRatio" min-width="70">
        <template slot-scope="scope">
          <span :title="moneyFormat(scope.row.holderRatio || 0, undefined, 4, true)">{{ moneyFormat(scope.row.holderRatio || 0, undefined, 2, true) }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" :label="$t('投资金额') + $t('金额单位')" show-overflow-tooltip sortable="custom" align="center" prop="investAmount">
        <template slot-scope="scope">
          <span :title="moneyFormat(scope.row.investAmount || 0, undefined, 4, true)" class="money-text">{{ moneyFormat(scope.row.investAmount || 0, 'w', 2, true) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getNewHolderByCompanyId } from '@/api/company/holder/companyHolderChange'
  export default {
    name: 'CompanyNewHolderInfo',
    props: {
      // 公司ID
      bussId: {
        type: String,
        required: true
      },
      height: {
        type: String,
        default: () => ''
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          companyId: this.bussId,
          changeId: undefined,
          prop: undefined,
          order: undefined
        },
        // 表单参数
        form: {},
        // 股东列表
        holders: [],
        // 股东类型字典
        holderTypeOptions: [],
        // 是否字典
        yesNoOptions: []
      }
    },
    created() {
      this.getDicts('company_person').then(response => {
        this.holderTypeOptions = response.data
      })
      this.getDicts('sys_yes_no').then(response => {
        this.yesNoOptions = response.data
      })
      this.getList()
    },

    methods: {
      // 排序
      dataSort(column) {
        this.loading = true
        if (column.order !== null && column.order !== undefined && column.order !== '') {
          this.queryParams.prop = column.prop
          if (column.order === 'ascending') {
            this.queryParams.order = 'asc'
          } else if (column.order === 'descending') {
            this.queryParams.order = 'desc'
          }
        } else {
          this.queryParams.prop = undefined
          this.queryParams.order = undefined
        }
        this.getList()
      },
      // 注册资本币种字典翻译
      holderTypeFormat(row) {
        return this.selectDictLabel(this.holderTypeOptions, row.holderType)
      },
      // 是否字典翻译
      yesNoFormat(row) {
        return this.selectDictLabel(this.yesNoOptions, row.whetherActualControl)
      },
      /** 查询新闻信息列表 */
      getList() {
        this.loading = true
        this.queryParams.companyId = this.bussId
        getNewHolderByCompanyId(this.queryParams).then(response => {
          var holders = []
          if (response.data && response.data.holders) {
            holders = response.data.holders
          }
          this.holders = holders
          this.loading = false
        })
      }
    }
  }
</script>
